
<!-- 
 * login登录页
 * @author: 
 * @since: 2022-04-02
 * index.vue
-->
<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-show-img hidden-sm-and-down">
        <div class="login-title">后台管理平台</div>
        <div class="login-img">
          <img :src="loginImg" alt="" />
        </div>
      </div>
      <div class="login-form" :class="{ 'is-mobile': isMobile }">
        <div class="form-warp">
          <div class="title">后台管理子系统</div>
          <el-form :model="form" :rules="rules" ref="validateForm">
            <el-form-item prop="username">
              <el-input placeholder="请输入账号名称" v-model="form.username" clearable>
                <template #prefix>
                  <svgIcon name="_geren" color="#666" size="16"></svgIcon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" class="password">
              <el-input @keyup.enter="handleLogin" placeholder="请输入账号密码" show-password v-model="form.password" clearable>
                <template #prefix>
                  <svgIcon name="weibiaoti--" color="#666" size="16"></svgIcon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="rememberPassword">
              <el-checkbox v-model="isCheckedPassword" label="记住密码" size="large" @change="checkChange" />
            </el-form-item>
            <el-form-item class="login-btn">
              <el-button type="primary" size="large" :loading="state.loading" class="login-btn" @click="handleLogin">登&nbsp;&nbsp;录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <footer class="copyright">Copyright 云南省xxxx All rights reserved</footer>
    <el-dialog v-model="isShowDialog" title="登录提示" width="500px" class="tipDialog" @close="dialogHandle(0)">
      <span class="tip">该账户已在其他设备登录，若非本人操作，为保证账户安全，请及时修改账户密码。是否强制登录？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" size="large" @click="dialogHandle(1)">确定</el-button>
          <el-button @click="dialogHandle(0)" size="large">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup >
import loginImg from '@/assets/img/login.png'
import { reactive, ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import md5 from 'js-md5';
import { Base64 } from 'js-base64'
const router = useRouter();
const store = useStore();

let state = reactive({
  loading: false,
});
const isMobile = computed(() => {
  return store.getters['setting/isMobile'];
});

//表单元素
const validateForm = ref(null);

//绑定数据
const form = reactive({
  username: '',
  password: '',

})

//登录提示
const isShowDialog = ref(false)


onMounted(() => {
  // 在页面加载时从cookie获取登录信息
  const username = getCookie("username");
  const password = Base64.decode(getCookie("password"));
  // 如果存在赋值给表单，并且将记住密码勾选
  if (username) {
    form.username = username;
    form.password = password;
    isCheckedPassword.value = true;
  }
})

const isCheckedPassword = ref(false)
//表单验证 
const rules = {
  username: [{ required: true, message: '请输入账号名称', trigger: 'blur' }],
  password: [{ required: true, message: '请输入账号密码', trigger: 'blur' }],
};
//登录事件
const handleLogin = async () => {
  await validateForm.value.validate((valid) => {
    if (valid) {
      const md = "xx1WET12^%3^(WE45";
      const pwd = md5(md5(md) + md5(form.password));
      const params = {
        username: form.username,
        password: pwd
      }
      state.loading = true;
      store.dispatch('user/login', params).then((mst) => {
        if (mst) {
          state.loading = false;
          if (mst === 40310) {
            isShowDialog.value = true
          }
        } else {
          console.log('准备进入首页');
          router.push('/').catch(() => { })
          state.loading = false;
          setUserInfo()
        }
      }).catch(() => {
        state.loading = false;
      });
    } else {
      console.log('没通过验证');
    }
  });
};
//弹窗操作
const dialogHandle = (type) => {//1.确定 0.取消
  state.loading = false;
  isShowDialog.value = false
  switch (type) {
    case 1:
      const md = "xx1WET12^%3^(WE45";
      const pwd = md5(md5(md) + md5(form.password));
      const params = {
        username: form.username,
        password: pwd
      }
      store.dispatch('user/forceLogin', params).then((mst) => {
        router.push('/').catch(() => { })
        setUserInfo()
      }).catch(() => {
      });
      break;

  }


}

//记住密码
const checkChange = (e) => {
  isCheckedPassword.value = e
}
// 储存表单信息
const setUserInfo = () => {
  // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
  // 如果没有勾选，储存的信息为空
  if (isCheckedPassword.value) {
    setCookie("username", form.username, 7);
    // base64加密密码
    let passWord = Base64.encode(form.password);
    setCookie("password", passWord, 7);
    setCookie("remember", isCheckedPassword.value, 7);
  } else {
    setCookie("username", "");
    setCookie("password", "");
  }
}

//保存cookie
const setCookie = (cName, value, expiredays) => {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie =
    cName +
    "=" +
    decodeURIComponent(value) +
    (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
}

//获取cookie
const getCookie = (key) => {
  if (document.cookie.length > 0) {
    var start = document.cookie.indexOf(key + "=");
    if (start !== -1) {
      start = start + key.length + 1;
      var end = document.cookie.indexOf(";", start);
      if (end === -1) end = document.cookie.length;
      return unescape(document.cookie.substring(start, end));
    }
  }
  return "";
}


</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  min-width: 573px;
  height: 100vh;
  background: url('../../assets/img/bj.png');
  background-repeat: no-repeat;
  background-position: 100%;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  .login-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    .login-show-img {
      .login-title {
        font-size: 28px;
        color: #34b9ff;
        font-weight: bold;
        text-align: right;
        margin-bottom: 26px;
      }
      .login-img {
        width: 600px;
        height: 370px;
        img {
          width: 100%;
        }
      }
    }
    .login-form {
      width: 420px;
      height: 400px;
      background: #fff;
      box-shadow: 0px 20px 40px 0px rgba(193, 205, 223, 0.3);
      border-radius: 8px;
      margin-left: 122px;
      display: flex;
      justify-content: center;
      :deep(.el-input__prefix) {
        align-items: center;
      }
      .form-warp {
        width: 420px;
        height: 400px;
        padding: 60px;
        box-sizing: border-box;
        .title {
          display: flex;
          justify-content: center;
          font-weight: 700;
          color: #333;
          font-size: 22px;
          font-family: 'Microsoft YaHei';
          margin-bottom: 30px;
        }
        :deep(.el-input__inner) {
          background-color: #fff;
          box-shadow: 0 0;
          border: 1px solid #e3e3e3;
          height: 46px;
          color: #999;
          font-size: 14px;
        }
        :deep(.el-input__prefix-inner) {
          border-right: 1px solid #e3e3e3;
          padding-right: 5px;
        }
        :deep(.el-input--prefix .el-input__inner) {
          padding-left: calc(50px);
        }
        :deep(.el-input__suffix-inner) {
          .el-icon {
            color: #999;
          }
        }
        :deep(.el-input__inner::placeholder) {
          color: #999;
          font-size: 14px;
        }
        .password {
          margin-bottom: 5px;
        }
        .rememberPassword {
          margin-bottom: 5px;
          .el-checkbox {
            color: #333;
            font-size: 14px;
            :deep(.el-checkbox__inner) {
              &::after {
                width: 3px;
              }
            }
          }
          :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
            color: #333;
          }
        }
        .login-btn {
          width: 100%;
          margin-top: 10px;
          .el-button {
            background: linear-gradient(90deg, #00c5f9, #00a2ff);
            border-radius: 0;
            height: 45px;
            font-size: 16px;
            border-radius: 4px;
            border: none;
          }
        }
      }
    }
  }
  .copyright {
    width: 100%;
    font-size: 12px;
    color: rgba(51, 51, 51, 0.5);
    text-align: center;
    position: fixed;
    bottom: 10px;
    left: 0;
  }
  :deep(.el-dialog__body) {
    .tip {
      color: #f74b33;
      font-size: 16px;
      line-height: 30px;
    }
  }
  :deep(.el-dialog__footer) {
    .el-button {
      width: 100px;
    }
  }
  :deep(.el-dialog) {
    margin-top: 30vh;
  }
}
</style>
